﻿button{padding: 1px 6px;background: none;border:none}
*{outline: none}
input[type=text]{border:solid 2px #C0C0C0;background-color: transparent}
html,body{height: 100%;overflow: hidden;font:600 16px 'Century Gothic', '微软雅黑', Helvetica, Arial, sans-serif;cursor: default;
    -webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;position: relative;}
.mainMenu{position: absolute;right: -300px;top: 0;width: 300px;height: calc(100% - 60px);background-color: rgb(230, 230, 230);padding:60PX 0 0 0;margin: 0;
    transition:right ease-in-out 0.4s,width ease-in-out 0.4s;;overflow-x: hidden;overflow-y: auto;}
.mainMenu menuitem{display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-left: 150px;
    line-height: 46px;background-color: rgb(213, 213, 213);padding-left: 30px;}
.no-touch .mainMenu menuitem:hover{background-color: rgb(68, 68, 68);color: #FFF}
.mainMenu .subMenu{height:0;padding-left: 60px; margin-left: -30px; color:#000; background-color: rgb(230, 230, 230);transition:color 0.1s linear, background-color 0.2s linear,height 0.2s ease-out}
.no-touch .mainMenu .subMenu:hover{background-color: rgb(68, 68, 68);color: #FFF}
.subMenuShow .subMenu{height:46px;}
.mainMenuShow menuitem{margin-left:0}
.mainMenuShow{right:0}
@media (max-width: 640px){ .mainMenuShow {width:calc(100% - 80px);}}
.mainContainer{height: 100%;width:100%;transition: opacity linear 0.4s,transform ease-in-out 0.4s, margin-left ease-in-out 0.4s;
    transform-origin: 100% 50%;transform-style: preserve-3d;
    -webkit-transition: opacity linear 0.4s,-webkit-transform ease-in-out 0.4s, margin-left ease-in-out 0.4s;
    -webkit-transform-origin: 100% 50%;-webkit-transform-style: preserve-3d;}
.mainContainerHide{opacity: 0.6;transform: perspective(500px) rotateY(6deg);-webkit-transform: perspective(500px) rotateY(6deg); margin-left: -300px}
@media (max-width: 640px){ .mainContainerHide {transform:perspective(500px) rotateY(6deg);-webkit-transform: perspective(500px) rotateY(6deg);margin-left: calc(80px - 100%)}}
header{height: 80px;background-color: #FF0;line-height: 80px;overflow:hidden;transition:height linear 0.4s}
header .menuButton{float: right;height: 34px;margin: 23px 40px 0 0;font-size: 40px}
.container{height: calc(100% - 92px);width:100%;transition:height linear 0.4s;overflow-y:auto}
@media (max-width: 640px){
    header{height: 60px;line-height: 60px;}
    header .menuButton{margin: 13px 30px 0 0;font-size: 40px}
    .container{height: calc(100% - 72px)}
}
footer{height: 12px;line-height:12px;text-align: center;color: #FFF;font-size: 12px;background-color: #000;transition:height linear 0.4s}
@media (max-width: 640px){
    .maxSizeContainer header{height:0}
    .maxSizeContainer .container{height:100%}
    .maxSizeContainer footer{height:0}
}